<!-- 扩展列 -->
<template>

        <tr v-for="item in arr" style="text-align: center;">
            <td>姓名：{{item.Name}}<br>年龄: {{item.Age}}</td>

        </tr>

        <!-- 定义表格 -->
        <table  border="1" >
            <th>
                <td  style="background-color: aqua;">用户借款编号</td>
                <td  style="background-color: aqua;">借款用户编号</td>
                <td  style="background-color: aqua;">借款款额名称</td>
                <td  style="background-color: aqua;">借款金额</td>
                <td  style="background-color: aqua;">剩余还款本金</td>

                        <tr v-for="item in PriceInfo">
                        <td>{{item.PSid}}</td>
                        <td>{{item.PUid}}</td>
                        <td>{{item.PName}}</td>
                        <td>{{item.PNum}}</td>
                        <td>{{item.PNums}}</td>

                        </tr>
            </th>

        </table>

         <!-- 定义常量赋值 -->
        <h1>{{TitleName}}</h1>
        

</template>

<!-- v-for="item in PriceInfo" -->

<!-- 选择数据类型为typestript -->
<script setup lang="ts">
    
    // 声明变量
    const arr=[
        {
            Name:"张大",
            Age:21,
        },

        {
            Name:"李尔",
            Age:20,
        },

        {
            Name:"刘珊",
            Age:22,
        },

        {
            Name:"钱嗣",
            Age:25,
        },

        {
            Name:"赵武",
            Age:24,
        },
    ]

    //声明金额信息表
    const PriceInfo=[
        {
            PSid:1,
            PUid:"zhangsan",
            PName:"八维助学金",
            PNum:400,
            PNums:0
        },

        {
            PSid:2,
            PUid:"zhangsan",
            PName:"八维助学金",
            PNum:10000,
            PNums:10000
        },
    ]


    //定义变量
    const TitleName="双向数据绑定演示";
</script>